import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../config/RouteConfig.dart';
import '../../../config/StyleConfig.dart';
import '../../../res/HDColors.dart';
import '../../../util/HDNavigator.dart';
import '../../../util/ScreenDevice.dart';
import 'logic.dart';

/// 应用
class DataPage extends StatelessWidget {
  final logic = Get.put(DataLogic());
  final state = Get.find<DataLogic>().state;

  late double barHeight;

  DataPage({super.key});

  @override
  Widget build(BuildContext context) {
    barHeight = ScreenDevice.getDeviceTopHeight(context);

    return Container(
        color: HDColors.grayBg,
        child: Stack(
          children: [
            Container(
                margin: const EdgeInsets.only(top: kToolbarHeight),
                child: GetBuilder<DataLogic>(builder: (logic) {
                  return ListView(
                    children: [
                      buildTextTitle("总览"),
                      Column(
                        children: [
                          GestureDetector(
                              onTap: () {
                                var args = {"pageData": ""};
                                var result = HDNavigator.openToName(
                                    RouteConfig.stationListPage,
                                    arguments: args);
                              },
                              child: Card(
                                margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                                color: HDColors.white,
                                shadowColor: HDColors.grayHint,
                                elevation: 1,
                                shape: RoundedRectangleBorder(
                                    side: BorderSide(
                                        width: 0.3, color: HDColors.divider),
                                    borderRadius: BorderRadius.all(
                                        new Radius.circular(5))),
                                child: Container(
                                    width: double.infinity,
                                    height: 100,
                                    child: Stack(children: [
                                      Container(
                                          margin: EdgeInsets.fromLTRB(
                                              20, 10, 20, 0),
                                          child: Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                SizedBox(height: 5),
                                                Icon(
                                                    color: HDColors.blue,
                                                    Icons.data_thresholding,
                                                    size: 26),
                                                const SizedBox(height: 5),
                                                const Text("电站数量",
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                const SizedBox(height: 5),
                                                Text(state.total.toString(),
                                                    style: TextStyle(
                                                      fontSize: StyleConfig
                                                          .fontContentSize14,
                                                    ))
                                              ])),
                                      Positioned(
                                        left: 120,
                                        top: 20,
                                        child: Column(
                                          children: [
                                            Row(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text("在线: ",
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                Text(state.online.toString(),
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                SizedBox(width: 10),
                                                Text("告警: ",
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                Text(state.alarm.toString(),
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                SizedBox(width: 10),
                                                Text("离线: ",
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                                Text(state.offline.toString(),
                                                    style: TextStyle(
                                                        fontSize: StyleConfig
                                                            .fontContentSize14,
                                                        color: HDColors
                                                            .formTitleColor)),
                                              ],
                                            ),
                                            const SizedBox(height: 20),
                                            Row(
                                              children: [
                                                BrnProgressChart(
                                                  key: UniqueKey(),
                                                  width: state.online == 0
                                                      ? 30
                                                      : (state.online /
                                                              state.total) *
                                                          160,
                                                  height: 20,
                                                  value: 0,
                                                  brnProgressIndicatorBuilder:
                                                      (BuildContext context,
                                                          double value) {
                                                    return Text(
                                                      "${((state.online / state.total) * 100).toStringAsFixed(0)}%",
                                                      style: TextStyle(
                                                          color: Colors.white),
                                                    );
                                                  },
                                                ),
                                                BrnProgressChart(
                                                  key: UniqueKey(),
                                                  width: state.alarmWidth.toDouble(),
                                                  height: 20,
                                                  backgroundColor: Colors.red,
                                                  value: 0,
                                                  brnProgressIndicatorBuilder:
                                                      (BuildContext context,
                                                          double value) {
                                                    return Text(
                                                      "${((state.alarm / state.total) * 100).toStringAsFixed(0)}%",
                                                      style: TextStyle(
                                                          color: Colors.white),
                                                    );
                                                  },
                                                ),
                                                BrnProgressChart(
                                                  key: UniqueKey(),
                                                  width: state.offlineWidth.toDouble(),
                                                  height: 20,
                                                  backgroundColor:
                                                      HDColors.dotColor,
                                                  value: 0,
                                                  brnProgressIndicatorBuilder:
                                                      (BuildContext context,
                                                          double value) {
                                                    return Text(
                                                      "${((state.offline / state.total) * 100).toStringAsFixed(0)}%",
                                                      style: TextStyle(
                                                          color: Colors.white),
                                                    );
                                                  },
                                                )
                                              ],
                                            )
                                          ],
                                        ),
                                      ),
                                      Positioned(
                                        right: 10,
                                        top: 40,
                                        child: Icon(
                                            Icons.arrow_forward_ios_sharp,
                                            size: 17),
                                      ),
                                    ])),
                              )),
                          Container(height: 15),
                          Card(
                            margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                            color: HDColors.white,
                            shadowColor: HDColors.grayHint,
                            elevation: 1,
                            shape: RoundedRectangleBorder(
                                side: BorderSide(
                                    width: 0.3, color: HDColors.divider),
                                borderRadius:
                                    BorderRadius.all(new Radius.circular(5))),
                            child: Container(
                                width: double.infinity,
                                height: 170,
                                child: Stack(children: [
                                  Align(
                                      alignment: Alignment.topCenter,
                                      child: Stack(children: [
                                        Container(
                                          margin: EdgeInsets.fromLTRB(
                                              30, 50, 20, 0),
                                          child: Column(
                                            children: [
                                              Text("实时功率KW",
                                                  style: TextStyle(
                                                    fontSize: StyleConfig
                                                        .fontContentSize12,
                                                  )),
                                            ],
                                          ),
                                        ),
                                        Container(
                                          margin: EdgeInsets.fromLTRB(
                                              20, 10, 20, 0),
                                          width: 100,
                                          height: 100,
                                          child: CircularProgressIndicator(
                                            valueColor:
                                                AlwaysStoppedAnimation<Color>(
                                                    Colors.blue),
                                            // 进度条颜色为蓝色
                                            strokeWidth: 5.0,
                                            backgroundColor: Colors.grey,
                                            value: state.todayPower/state.monthPower,
                                          ),
                                        ),
                                      ])),
                                  Positioned(
                                    left: 50,
                                    bottom: 10,
                                    child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [
                                          Text(state.todayPower.toString(),
                                              style: TextStyle(
                                                fontSize: StyleConfig
                                                    .fontContentSize14,
                                              )),
                                          SizedBox(height: 5),
                                          Text("今日发电量(度)",
                                              style: TextStyle(
                                                  fontSize: StyleConfig
                                                      .fontContentSize12,
                                                  color:
                                                      HDColors.formTitleColor)),
                                        ]),
                                  ),
                                  Positioned(
                                    right: 50,
                                    bottom: 10,
                                    child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [
                                          Text(state.monthPower.toString(),
                                              style: TextStyle(
                                                fontSize: StyleConfig
                                                    .fontContentSize14,
                                              )),
                                          SizedBox(height: 5),
                                          Text("本月发电量(度)",
                                              style: TextStyle(
                                                  fontSize: StyleConfig
                                                      .fontContentSize12,
                                                  color:
                                                      HDColors.formTitleColor)),
                                        ]),
                                  ),
                                ])),
                          ),
                          Container(height: 15),
                          Card(
                            margin: EdgeInsets.fromLTRB(20, 0, 20, 20),
                            color: HDColors.white,
                            shadowColor: HDColors.grayHint,
                            elevation: 1,
                            shape: RoundedRectangleBorder(
                                side: BorderSide(
                                    width: 0.3, color: HDColors.divider),
                                borderRadius:
                                    BorderRadius.all(new Radius.circular(5))),
                            child: Container(
                                width: double.infinity,
                                height: 490,
                                child: Stack(children: [
                                  Positioned(
                                    left: 20,
                                    top: 10,
                                    child: Text("电量与收益统计",
                                        style: TextStyle(
                                          fontSize:
                                              StyleConfig.fontContentSize14,
                                        )),
                                  ),
                                  Positioned(
                                    left: 20,
                                    top: 40,
                                    child: BrnSelectTag(
                                        tags: ["月", "年"],
                                        spacing: 20,
                                        tagWidth: 30,
                                        initTagState: [true],
                                        onSelect: (selectedIndexes) {
                                          state.isMonth = selectedIndexes[0];
                                          logic.requestChart(false);
                                        }),
                                  ),
                                  Positioned(
                                    left: 20,
                                    top: 80,
                                    child: IconButton(
                                      onPressed: () async {
                                        logic.getYearData("back");
                                      },
                                      icon: const Icon(
                                        Icons.arrow_back_ios,
                                        size: 20.0,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                      top: 80,
                                      left: 0,
                                      right: 0,
                                      child: Container(
                                          height: 50,
                                          alignment: Alignment.center,
                                          child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Visibility(
                                                    visible: state.isMonth == 0,
                                                    child: Text(
                                                        state.month.toString(),
                                                        style: TextStyle(
                                                          fontSize: StyleConfig
                                                              .fontContentSize14,
                                                        ))),
                                                Text(state.year.toString(),
                                                    style: TextStyle(
                                                      fontSize: StyleConfig
                                                          .fontContentSize14,
                                                    ))
                                              ]))),
                                  Positioned(
                                    right: 20,
                                    top: 80,
                                    child: IconButton(
                                      onPressed: () async {
                                        logic.getYearData("add");
                                      },
                                      icon: const Icon(
                                        Icons.arrow_forward_ios,
                                        size: 20.0,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.fromLTRB(0, 130, 0, 0),
                                    child: _brokenLine2(context),
                                  )
                                ])),
                          )
                        ],
                      ),
                    ],
                  );
                })),
            Container(color: HDColors.green, child: buildTitleBar())
          ],
        ));
  }

  /// 标题
  buildTitleBar() {
    return Container(
        height: barHeight + kToolbarHeight,
        width: double.infinity,
        padding: EdgeInsets.only(top: barHeight),
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0x8007C160), Color(0x0007C160)],
          ),
        ),
        child: Stack(
          alignment: const FractionalOffset(0, 0.5),
          children: const [
            Align(
                alignment: FractionalOffset(0.5, 0.5),
                child: Text("华裕光伏",
                    style: TextStyle(
                        fontSize: 18,
                        color: HDColors.white,
                        fontWeight: FontWeight.w600))),
          ],
        ));
  }

  buildTextTitle(String text) {
    return Container(
        margin: const EdgeInsets.fromLTRB(20, 15, 20, 15),
        child: Row(
          children: [
            Container(
              width: 4,
              height: 12,
              color: HDColors.green,
            ),
            Padding(
                padding: const EdgeInsets.only(left: 12),
                child: Text(text,
                    style: const TextStyle(
                        fontSize: StyleConfig.fontContentSize16,
                        color: HDColors.black,
                        fontWeight: FontWeight.w600)))
          ],
        ));
  }

  Widget _brokenLine2(context) {
    List<AxisItem> axisItemListData = [];
    List<BrnProgressBarItem> barListData = [];
    List<BrnProgressBarItem> pubListData = [];
    for (int i = 0; i < state.chartList.length; i++) {
      axisItemListData.add(AxisItem(showText: (i + 1).toString()));
    }
    for (int i = 0; i < state.chartList.length; i++) {
      barListData.add(BrnProgressBarItem(
          text: state.chartList[i].earnValue.toString(),
          value: state.chartList[i].earnValue ?? 0));
    }
    for (int i = 0; i < state.chartList.length; i++) {
      pubListData.add(BrnProgressBarItem(
          text: state.chartList[i].attribValue.toString(),
          value: state.chartList[i].attribValue ?? 0));
    }
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: [
              SizedBox(width: 20),
              Text("收益",
                  style: TextStyle(
                      fontSize: StyleConfig.fontContentSize12,
                      color: HDColors.formTitleColor)),
              Icon(
                Icons.rectangle,
                color: Colors.orange,
                size: 17,
              ),
              SizedBox(width: 30),
              Text("发电量",
                  style: TextStyle(
                      fontSize: StyleConfig.fontContentSize12,
                      color: HDColors.formTitleColor)),
              Icon(
                Icons.rectangle,
                color: HDColors.blue,
                size: 17,
              ),
            ],
          ),
          BrnProgressBarChart(
            barChartStyle: BarChartStyle.vertical,
            xAxis: ChartAxis(axisItemList: axisItemListData),
            barBundleList: [
              BrnProgressBarBundle(
                  barList: barListData,
                  colors: [Color(0xFFFB8C00), Color(0xFFFFB74D)]),
              BrnProgressBarBundle(
                  barList: pubListData,
                  colors: [Color(0xff1545FD), Color(0xff0984F9)]),
            ],
            yAxis: ChartAxis(axisItemList: [
              AxisItem(
                  showText: (state.barMaxValue / 6).toInt().toString()),
              AxisItem(
                  showText:
                      ((state.barMaxValue / 6) * 2).toInt().toString()),
              AxisItem(
                  showText:
                      ((state.barMaxValue / 6) * 3).toInt().toString()),
              AxisItem(
                  showText:
                      ((state.barMaxValue / 6) * 4).toInt().toString()),
              AxisItem(
                  showText:
                      ((state.barMaxValue / 6)* 5).toInt().toString()),
              AxisItem(
                  showText: (state.barMaxValue).toString())
            ]),
            singleBarWidth: 12,
            barGroupSpace: 5,
            barMaxValue: state.barMaxValue.toDouble(),
            onBarItemClickInterceptor:
                (barBundleIndex, barBundle, barGroupIndex, barItem) {
              return true;
            },
          ),
        ],
        crossAxisAlignment: CrossAxisAlignment.start,
      ),
    );
  }

  Widget _brokenLine(context) {
    var chartLine = BrnBrokenLine(
      showPointDashLine: true,
      yHintLineOffset: 40,
      lines: _getPointsLines(),
      size: Size(MediaQuery.of(context).size.width - 50 * 2,
          MediaQuery.of(context).size.height / 5 * 1.6 - 20 * 2),
      yDialValues: getYDialValues(),
      xDialValues: _getXDialValues(_getPointsLines()),
      yDialMin: 0,
      yDialMax: 120,
      xDialMin: 0,
      xDialMax: state.chartList.length.toDouble(),
      isHintLineSolid: false,
      isShowYDialText: true,
    );
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: [
              SizedBox(width: 20),
              Text("收益",
                  style: TextStyle(
                      fontSize: StyleConfig.fontContentSize12,
                      color: HDColors.formTitleColor)),
              Icon(
                Icons.rectangle,
                color: Colors.orange,
                size: 17,
              ),
              SizedBox(width: 30),
              Text("发电量",
                  style: TextStyle(
                      fontSize: StyleConfig.fontContentSize12,
                      color: HDColors.formTitleColor)),
              Icon(
                Icons.rectangle,
                color: HDColors.blue,
                size: 17,
              ),
            ],
          ),
          SizedBox(
            height: 16,
          ),
          chartLine,
        ],
        crossAxisAlignment: CrossAxisAlignment.start,
      ),
    );
  }

  List<BrnPointsLine> _getPointsLines() {
    BrnPointsLine pointsLine, _pointsLine2;
    List<BrnPointsLine> pointsLineList = [];
    List<BrnPointData> brnPointData = [];
    for (var i = 0; i < state.chartList.length; i++) {
      brnPointData.add(BrnPointData(
          pointText: state.chartList[i].earnValue.toString(),
          y: state.chartList[i].earnValue ?? 0,
          x: i + 1,
          lineTouchData: BrnLineTouchData(
              onTouch: () {
                return state.chartList[i].earnValue.toString();
              },
              tipWindowSize: Size(10, 10))));
    }
    pointsLine = BrnPointsLine(
      lineWidth: 3,
      pointRadius: 4,
      isShowPoint: false,
      isCurve: true,
      points: brnPointData,
      lineColor: Colors.orange,
    );

    // _pointsLine2 = BrnPointsLine(
    //   lineWidth: 3,
    //   pointRadius: 4,
    //   isShowPoint: false,
    //   isCurve: true,
    //   points: [
    //     BrnPointData(
    //         pointText: '150',
    //         y: 15,
    //         x: 1,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '15';
    //             })),
    //     BrnPointData(
    //         pointText: '30',
    //         y: 30,
    //         x: 2,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '30';
    //             })),
    //     BrnPointData(
    //         pointText: '17',
    //         y: 17,
    //         x: 3,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '17';
    //             })),
    //     BrnPointData(
    //         pointText: '18',
    //         y: 25,
    //         x: 4,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '18';
    //             })),
    //     BrnPointData(
    //         pointText: '13',
    //         y: 40,
    //         x: 5,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '13';
    //             })),
    //     BrnPointData(
    //         pointText: '16',
    //         y: 30,
    //         x: 6,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '16';
    //             })),
    //     BrnPointData(
    //         pointText: '49',
    //         y: 49,
    //         x: 7,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '49';
    //             })),
    //     BrnPointData(
    //         pointText: '66',
    //         y: 66,
    //         x: 8,
    //         lineTouchData: BrnLineTouchData(
    //             onTouch: () {
    //               return '66';
    //             },
    //             tipWindowSize: Size(10, 10))),
    //     BrnPointData(
    //         pointText: '77',
    //         y: 80,
    //         x: 9,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '77';
    //             })),
    //     BrnPointData(
    //         pointText: '88',
    //         y: 90,
    //         x: 10,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '88';
    //             })),
    //     BrnPointData(
    //         pointText: '99',
    //         y: 60,
    //         x: 11,
    //         lineTouchData: BrnLineTouchData(
    //             tipWindowSize: Size(60, 40),
    //             onTouch: () {
    //               return '99';
    //             })),
    //   ],
    //   shaderColors: [
    //     Colors.green.withOpacity(0.3),
    //     Colors.green.withOpacity(0.01)
    //   ],
    //   lineColor: Colors.blue,
    // );

    pointsLineList.add(pointsLine);
    // pointsLineList.add(_pointsLine2);
    return pointsLineList;
  }

  List<BrnDialItem> getYDialValues() {
    return [
      BrnDialItem(
        dialText: '0',
        dialTextStyle: TextStyle(fontSize: 10.0, color: Colors.green),
        value: 0,
      ),
      BrnDialItem(
        dialText: (state.isMonth == 0 ? 1000 : 10000).toString(),
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: (state.isMonth == 0 ? 1000 : 10000),
      ),
      BrnDialItem(
        dialText: ((state.isMonth == 0 ? 1000 : 10000) * 2).toString(),
        dialTextStyle: TextStyle(fontSize: 10.0, color: Color(0xFF999999)),
        value: (state.isMonth == 0 ? 1000 : 10000) * 2,
      ),
      BrnDialItem(
        dialText: ((state.isMonth == 0 ? 1000 : 10000) * 3).toString(),
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: (state.isMonth == 0 ? 1000 : 10000) * 3,
      ),
      BrnDialItem(
        dialText: ((state.isMonth == 0 ? 1000 : 10000) * 4).toString(),
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: ((state.isMonth == 0 ? 1000 : 10000) * 4),
      ),
      BrnDialItem(
        dialText: ((state.isMonth == 0 ? 1000 : 10000) * 5).toString(),
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: ((state.isMonth == 0 ? 1000 : 10000) * 5),
      ),
      BrnDialItem(
        dialText: ((state.isMonth == 0 ? 1000 : 10000) * 6).toString(),
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: ((state.isMonth == 0 ? 1000 : 10000) * 6),
      )
    ];
  }

  _getXDialValues(List<BrnPointsLine> lines) {
    List<BrnDialItem> _xDialValue = [];
    for (int index = 0; index < lines[0].points.length; index++) {
      _xDialValue.add(BrnDialItem(
        dialText: '${lines[0].points[index].x}',
        dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
        value: lines[0].points[index].x,
      ));
    }
    return _xDialValue;
  }
}
